<template>
  <div>
    <!-- 1.计数器 - 测试使用 ref 来处理单个数据的响应式更新 -->
  <div class="counter">
    <h2>{{ Counter }}</h2>
    <button @click="changeIn">Increment</button>
    <button @click="changeDe">Decrement</button>
  </div>
  <hr>
    
  </div>
</template>
<script setup lang="ts">
import {ref } from 'vue';
// 1.计数器 - 测试使用 ref 来处理单个数据的响应式更新 
const Counter = ref(0)
function changeIn() {
  Counter.value += 1
}

function changeDe() {
  Counter.value -= 1
}

</script>
<style scoped>
  /*  1.计数器 - 测试使用 ref 来处理单个数据的响应式更新  */
.counter {
  text-align: center;
}

button {
  margin: 5px;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

</style>